<template>
  <!--头部-->
  <div style="height: 10vh; display: flex; align-items: center;">
    <div style="display: flex; flex: 1; align-items: center; margin: 0px 2%; ">
      <img src="@/assets/picture/养老金.png" alt="" style="width: 60px; margin-right: 20px;">
      <span style="font-size: 30px; color: #0064cc;">唐山市养老保险</span>
    </div>
    <div style="flex:2;">
      <img src="@/assets/picture/silogo.png" alt="" style="">
      <img src="@/assets/picture/wenzi.png" alt="" style="">
    </div>
    <div v-if="data.enterprise" style=" width:fit-content; align-items: center; display: flex;">
      <el-dropdown >
        <img src="@/assets/picture/用户.png" alt="" style="width: 40px; height: 40px;">
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="exit">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span style=" margin-left: 5px; margin-right: 10px;">{{data.enterprise.enterpriseName}}</span>
    </div>
    <div v-else-if="!data.enterprise" style="display: flex;margin-right: 10px;">
      <span class="spanbutton" @click="$router.push('/login')">登录</span>
      <span style="color: #0064cc;">|</span>
      <span class="spanbutton" @click="$router.push('/register')">注册</span>
    </div>
  </div>
  <!--导航栏-->
  <div>
    <el-menu 
    text-color="#fff" active-text-color="#ffd04b" 
    mode="horizontal" :default-active="activeIndex.toString()" 
    router class="headmenu" >
      <el-menu-item index="/home/homepage">首页</el-menu-item>
      <el-menu-item index="/home/policy">政策宣传</el-menu-item>
      <el-menu-item index="/home/enterprise/enterprisehome">企业之家</el-menu-item>
      <el-menu-item index="/home/calculator/retireAge">计算器</el-menu-item>
    </el-menu>
  </div>
  <div class="main">
    <RouterView />
  </div>

</template>
<script setup>
import {  reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const data = reactive({
  enterprise:JSON.parse(localStorage.getItem('enterprise')),
})
const route = useRoute();
const activeIndex = ref(route.path); // 初始化为当前路由路径
watch(
  () => route.path,
  (newPath) => {
      activeIndex.value = newPath;
  }
);
const exit=()=>{
  localStorage.removeItem('enterprise');
  data.enterprise=null;
}
</script>
<style scoped>
.spanbutton {
  margin-left: 5px;
  margin-right: 10px;
  color: #0064cc;
  cursor: pointer;
}
.headmenu {
  display: flex;
  justify-content: space-between;
  font-size: x-large;
  height: 10vh;
  background-color: #1c4f9c;
  color: aliceblue;
}
.el-menu-item {
  font-size: 16px; /*  自定义大小 */
}
.headmenu .el-menu-item.is-active {/*  选中颜色 */
  background: #195087 !important;
}
.headmenu .el-menu-item:hover {
  background: #175ca0 !important;
}
/* 去除 el-dropdown 中 img 的鼠标悬停边框和焦点样式 */

.main{
  width: 96%;
  margin: 0px 2%;
}
</style>
